<template>
  <div>
    <input type="checkbox" :checked="completed" @change="toggleCompleted">
    <span>{{ title }}</span>
    <button @click="remove">删除</button>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    completed: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    toggleCompleted() {
      this.$emit('update:completed', !this.completed);
    },
    remove() {
      this.$emit('remove-todo', this.title);
    }
  }
};
</script>

<style scoped>
</style>
